按钮组	</h1>
    		<h2 class="page_title">
		1 基本实例	</h2>
    	<div class="codeView bs-docs-example ">
					<div class="btn-group ">
			  		<span class="btn radius btn-primary ">
				左边按钮		</span>
	  		<span class="btn radius btn-default ">
				中间按钮		</span>
	  		<span class="btn radius btn-default ">
				中间按钮		</span>
 	  		<span class="btn radius btn-default ">
				右边按钮		</span>
	</div>
		</div>
    		<h3>
		Html代码	</h3>
	<pre class="brush: html">
		<div class="btn-group">
			<span class="btn btn-primary radius">左边按钮</span>
			<span class="btn btn-default radius">中间按钮</span>
			<span class="btn btn-default radius">中间按钮</span>
			<span class="btn btn-default radius">右边按钮</span>
		</div>
	 </pre>
	 	 		<h2>
		2 嵌套	</h2>
	 	<p>
		您可以在一个按钮组内嵌套另一个按钮组，即，在一个 	<b>
		.btn-group	</b>
 内嵌套另一个 	<b>
		.btn-group	</b>
 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。	</p>
	 	<div class="codeView bs-docs-example ">
		    		<div class="btn-group ">
		      <button type="button" class="btn btn-default ">
        按钮 1    </button>
      <button type="button" class="btn btn-default ">
        按钮 2    </button>
  		<div class="btn-group ">
		        <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
        下列    <span class="caret"></span>
    </button>
        <ul class="dropdown-menu">          <li>
    <a href="#">下拉链接 1</a></li>
          <li>
    <a href="#">下拉链接 2</a></li>
    </ul>
  	</div>
	</div>
		</div>
    		<h3>
		Html代码	</h3>
	<pre class="brush: html">
		<div class="btn-group">
		  <button type="button" class="btn btn-default">按钮 1</button>
		  <button type="button" class="btn btn-default">按钮 2</button>

		  <div class="btn-group">
		    <button type="button" class="btn btn-default dropdown-toggle"
		      data-toggle="dropdown">
		      下列
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu">
		      <li><a href="#">下拉链接 1</a></li>
		      <li><a href="#">下拉链接 2</a></li>
		    </ul>
		  </div>
		</div>
	 </pre>
	 	 		<h2>
		3 垂直的按钮组	</h2>
	 	<p>
		下面的实例演示了上面表格中讨论到的 class 	<b>
		.btn-group-vertical	</b>
 的使用：	</p>
	 	<div class="codeView bs-docs-example ">
		    	    <div class="btn-group-vertical">      <button type="button" class="btn btn-default ">
        按钮 1    </button>
      <button type="button" class="btn btn-default ">
        按钮 2    </button>
      <div class="btn-group-vertical">        <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
        下拉    <span class="caret"></span>
    </button>
        <ul class="dropdown-menu">          <li>
    <a href="#">下拉链接 1</a></li>
          <li>
    <a href="#">下拉链接 2</a></li>
    </ul>
  </div>
 </div>
		</div>
    		<h3>
		Html代码	</h3>
	<pre class="brush: html">
		<div class="btn-group-vertical">
		  <button type="button" class="btn btn-default">按钮 1</button>
		  <button type="button" class="btn btn-default">按钮 2</button>

		  <div class="btn-group-vertical">
		    <button type="button" class="btn btn-default dropdown-toggle"
		      data-toggle="dropdown">
		      下拉
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu">
		      <li><a href="#">下拉链接 1</a></li>
		      <li><a href="#">下拉链接 2</a></li>
		    </ul>
		  </div>
		</div>
	 </pre>
	 
			<h2>
		4 按钮功能组	</h2>
	<div class="codeView bs-docs-example ">
				<div class="widget-body">
			<p>
		将一系列按钮组成一个按钮组，使用以下样式<code>.btn</code>in<code>.btn-group</code>		</p>
			<div class="row">
				<table class="table table-bordered">
							<thead>
		<tr>
									<th style="width:25%;font-size:15px">
		水平分组	</th>
							<th style="width:25%;font-size:15px">
		带有图标	</th>
							<th style="width:50%;font-size:15px">
		多按钮分组	</th>
						</tr>
	</thead>
					<tbody>
					<tr>
												<td style="padding-bottom:20px;">
								<div class="btn-group ">
									    <button type="button" class="btn btn-default ">
        左侧	    </button>
							    <button type="button" class="btn btn-default ">
        中间    </button>
							    <button type="button" class="btn btn-default ">
        右侧    </button>
							</div>
							</td>
							<td style="padding-bottom:20px;">
								<div class="btn-group ">
										    <button type="button" class="btn btn-default ">
        <i class="fa fa-align-left"></i>    </button>
								    <button type="button" class="btn btn-default ">
        <i class="fa fa-align-center"></i>    </button>
								    <button type="button" class="btn btn-default ">
        <i class="fa fa-align-right"></i>    </button>
								    <button type="button" class="btn btn-default ">
        <i class="fa fa-align-justify"></i>    </button>
							</div>
							</td>
							<td style="padding-bottom:20px;">
									<div class="btn-toolbar">
											<div class="btn-group ">
											    <button type="button" class="btn btn-default ">
        1    </button>
									    <button type="button" class="btn btn-default ">
        2    </button>
									    <button type="button" class="btn btn-default ">
        3    </button>
									    <button type="button" class="btn btn-default ">
        4    </button>
									</div>
									<div class="btn-group ">
											    <button type="button" class="btn btn-default ">
        5    </button>
									    <button type="button" class="btn btn-default ">
        6    </button>
									    <button type="button" class="btn btn-default ">
        7    </button>
									</div>
									<div class="btn-group ">
		    <button type="button" class="btn btn-default ">
        8    </button>
	</div>
								</div>
							</td>
									</tr>
	</tbody>
	</table>
	<hr class="simple">
	<p>
		将一组按钮垂直排放为一组，而不是水平排放<code>.btn-group-vertical</code>.
	</p>
		</div>
	</div>
	</div>
		<h3>
		Html代码	</h3>
<pre class="brush: html">
<!-- widget content -->
<div class="widget-body">
	<p>
		将一系列按钮组成一个按钮组，使用以下样式<code>.btn</code>in<code>.btn-group</code>.
	</p>
	<div class="row">
		<div class="col-md-12">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th style="width:25%">水平分组</th>
						<th style="width:25%">带有图标</th>
						<th style="width:50%">多按钮分组</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
						<div class="btn-group">
							<button type="button" class="btn btn-default">
								左侧
							</button>
							<button type="button" class="btn btn-default">
								中间
							</button>
							<button type="button" class="btn btn-default">
								右侧
							</button>
						</div></td>
						<td>
						<div class="btn-group">
							<button type="button" class="btn btn-default">
								<i class="fa fa-align-left"></i>
							</button>
							<button type="button" class="btn btn-default">
								<i class="fa fa-align-center"></i>
							</button>
							<button type="button" class="btn btn-default">
								<i class="fa fa-align-right"></i>
							</button>
							<button type="button" class="btn btn-default">
								<i class="fa fa-align-justify"></i>
							</button>
						</div></td>
						<td>
						<div class="btn-toolbar">
							<div class="btn-group">
								<button type="button" class="btn btn-default">
									1
								</button>
								<button type="button" class="btn btn-default">
									2
								</button>
								<button type="button" class="btn btn-default">
									3
								</button>
								<button type="button" class="btn btn-default">
									4
								</button>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-default">
									5
								</button>
								<button type="button" class="btn btn-default">
									6
								</button>
								<button type="button" class="btn btn-default">
									7
								</button>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-default">8</button>
							</div>
						</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<hr class="simple">
	<p>
		将一组按钮垂直排放为一组，而不是水平排放<code>.btn-group-vertical</code>.
	</p>
</div>
<!-- end widget content -->
</pre>

		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.buttonGroup包即可</span></pre>
